import {Card, CardHeader, UncontrolledTooltip} from "reactstrap";
import React from "react";
import {HelpCircle} from "react-feather";

const Spotify = props => {
  return (
    <Card className="analytics-card spotify-card">
      <div className="analytics-card__header">
        <CardHeader className="p-0">
          <div className="analytics-card__title">Spotify</div>
          <HelpCircle size={20} className="cursor-pointer text-muted" id="spotify-card__help-icon"/>
          <UncontrolledTooltip placement="left" target="spotify-card__help-icon">
            Данные Артиста
          </UncontrolledTooltip>
        </CardHeader>
      </div>
      <div className="d-flex justify-content-center pt-2">
        <span className="popularity pr-2">Популярность</span>
        <span className="popularity-count">{props.spotify.popularity}</span>
      </div>
      <div className="analytics-card__content analytics-card__content-small">
        <div className="row mt-2">
          <div className="col-12 col-md-6">
            <h3 className="success">Похожие артисты</h3>
            <div className="d-flex py-2 flex-column">
              {
                props.spotify.related.map((related, id) => {
                  if (id < 8)
                    return <div key={id} className="d-flex w-100 artist align-items-center justify-content-start pt-1 px-1">
                      <img className="border-radius-50 mr-2" width={60} height={60} src={related.image} alt={related.name}/>
                      <h4 className="mt-1 artist-name">{related.name}</h4>
                    </div>
                })
              }
            </div>
          </div>
          <div className="col-12 col-md-6">
            <h3 className="success">Популярные треки</h3>
            <div>
              {
                props.spotify.tracks.map((track, id) => {
                  if (id < 8)
                    return <h4 key={id} className="mt-1 track-name">
                      {props.spotify.name} - {track}
                    </h4>
                })
              }
            </div>
          </div>
        </div>
      </div>
    </Card>
  )
}

export default Spotify
